<template>
  <el-card class="ResourceAnswer" body-style="padding:10px" shadow="hover">
    <div class="resource-name">{{ resource.label_ZH }}</div>
    <el-collapse accordion @change="handleCollapseChange">
      <el-collapse-item title="详细信息" name="1" v-if="resourcesProperty.length>0">
        <div class="detail-item" v-for="item in resourcesProperty" :key="item" v-html="item" >
        </div>
      </el-collapse-item>
      <el-collapse-item title="相关问题" name="recommend" :key="refreshRecommendKey">
        <div v-if="Array.from(recommendList).length > 0">
          <div class="aboutQuestion" v-for="item in recommendList" :key="item" @click="$emit('to-rec', item)">
            {{ item }}
          </div>
        </div>
        <div class="aboutQuestion" v-if="Array.from(recommendList).length === 0 && !loading.recommend">
          没有相关问题推荐
        </div>
        <div v-if="loading.recommend">
          <el-icon class="el-icon-loading"/>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script>
import * as qaUtil from "@/utils/kgqa/qaUtil";
import { askForRecommendAPI } from "@/api/kfqa/kgqa";
export default {
  name: "ResourceAnswer",
  props: ["answer"],
  data() {
    return {
      resource: {},
      resourcesProperty: [],
      nodes: [],
      types: [],
      triples: [],
      recommendList: new Set(),
      refreshRecommendKey: Symbol(),
      loading: {
        recommend: false
      },
      recommendAsked: false //是否已经请求过问题推荐
    };
  },
  created() {
    this.resource = this.answer.content.resource;
    this.nodes = this.answer.content.kg.nodes;
    this.types = this.answer.content.kg.types;
    this.triples = this.answer.content.kg.properties;
    this.initResourcesProperty();
  },
  methods: {
    handleCollapseChange(name) {
      if (name === "recommend") {
        this.getRecommend();
      }
    },
    getRecommend() {
      if (this.recommendAsked) return;
      this.loading.recommend = true;
      askForRecommendAPI({
          uri: this.resource.uri
        },
        res => {
          res.forEach(recommend => {
            this.recommendList.add(recommend);
          });
          this.refreshRecommendKey = Symbol();
          this.recommendAsked = true;
        },
        () => {
          this.recommendAsked = false;
        },
        () => {
          this.loading.recommend = false;
        }
      );
    },
    initResourcesProperty() {
      let map = new Map();
      this.triples.forEach(triple => {
        if (triple.sourceId === this.resource.id) {
          let node = qaUtil.getNodeById(triple.targetId, this.nodes);
          let value = map.get(triple.label_ZH);
          map.set(
            triple.label_ZH,
            value === undefined ? node.label_ZH : value + ";" + node.label_ZH
          );
        }
      });
      let orderArr = []; //将一些关键属性提至靠前位置
      map.forEach((value, key) => {
        if (key === "名称") {
          orderArr[0] = { key: "名称", value: value };
        } else if (key === "type") {
          orderArr[0] = { key: "类型", value: value };
        } else if (key === "sameAs") {
          key = "等价于";
        } else {
          let item = "<b>" + key + ":</b> " + value;
          this.resourcesProperty.push(item);
        }
      });
      orderArr.forEach(o => {
        let item = "<b>" + o.key + ":</b> " + o.value;
        this.resourcesProperty.unshift(item);
      });
    }
  }
};
</script>

<style scoped>
.resource-name {
  text-align: left;
  font-size: 15px;
  line-height: 40px;
  font-weight: bold;
}
.detail-item {
  text-align: left;
}
.aboutQuestion {
  text-align: left;
  line-height: 30px;
}
.aboutQuestion:hover {
  background-color: #c0c4cc;
  cursor: pointer;
}
</style>
